<template>
    <div>
      <h1>v-for渲染列表案例</h1>
      <table>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>地址</th>
        </tr>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>
    </div>
  </template>
  <script setup>
  import { ref } from "vue";
  const list = ref([
    { id: 1, name: "张三", sex: "男", age: 18, address: "北京" },
    { id: 2, name: "李四", sex: "女", age: 19, address: "上海" },
    { id: 3, name: "王五", sex: "男", age: 20, address: "广州" },
    { id: 4, name: "赵六", sex: "女", age: 21, address: "深圳" },
    { id: 5, name: "田七", sex: "男", age: 22, address: "杭州" },
    { id: 6, name: "王八", sex: "女", age: 23, address: "南京" },
    { id: 7, name: "九十", sex: "男", age: 24, address: "武汉" },
    { id: 8, name: "十一", sex: "女", age: 25, address: "成都" }
  ]);
  </script>
  <style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  </style>
   